<template>
  <div class="article_container">
    <!-- 一条文章单元格 -->
    <van-cell>
      <!-- 标题区域的插槽 -->
      <template #title>
        <div class="title-box">
          <!-- 标题 -->
          <span>{{ title }}</span>
          <img class="thumb" v-lazy="img.images[0]" v-if="img.type == 1" />
        </div>
        <div class="thumb-box" v-if="img.type > 1">
          <img class="thumb" v-lazy="item" v-for="(item, i) in img.images" :key="i" />
        </div>
      </template>
      <!-- label 区域的插槽 -->
      <template #label>
        <div class="label-box">
          <div>
            <span>作者:{{ author }}</span>
            <span>{{ count }}条评论</span>
            <span>{{ timeAgo(time) }}</span>
          </div>
          <!-- 反馈按钮 -->
          <van-icon name="cross" @click.stop="show1 = true" v-show="hide" />
        </div>
      </template>
    </van-cell>

    <van-action-sheet v-model="show1" :actions="actions1" @select="onSelect" get-container="body" cancel-text="取消" />
    <van-action-sheet v-model="show2" :actions="actions2" @select="onSelect" get-container="body" cancel-text="取消" />
  </div>
</template>

<script>
import moment from 'moment'

import { ACTION_SHIFT_1, ACTION_SHIFT_2 } from '@/content/index.js'

// import { Notify } from 'vant'
export default {
  name: 'ArticleItem',
  props: {
    hide: {
      type: Boolean,
      default: true
    },
    title: {},
    author: {},
    time: {},
    count: {},
    img: {
      type: Object
    },
    id: {}
  },
  data() {
    return {
      show1: false, // 一级反馈面板的数据
      show2: false, // 二级反馈面板的数据
      actions1: ACTION_SHIFT_1,
      actions2: ACTION_SHIFT_2
    }
  },
  methods: {
    timeAgo(dateStr) {
      moment.locale('zh-cn')
      var a = moment(dateStr)
      var b = moment(Date.now())
      return a.from(b)
    },
    onSelect(item) {
      // 默认情况下点击选项时不会自动收起
      // 可以通过 close-on-click-action 属性开启自动收起
      if (item.name === '反馈垃圾内容') {
        this.show1 = false
        this.show2 = true
      } else if (item.name === '不感兴趣') {
        this.$emit('delArticle', this.id)
        this.show1 = false
        console.log(this.id)

        // postDislikeAPI()
      } else {
        this.$emit('reportArticle', this.id, item.value)
        console.log(item)
        this.show2 = false
      }
    }
  }
}
</script>

<style scoped lang="less">
/* 标题样式 */
.title-box {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}

/* label描述样式 */
.label-box {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

/* 文章信息span */
.label-box span {
  margin: 0 3px;
  &:first-child {
    margin-left: 0;
  }
}
.thumb {
  width: 113px;
  height: 70px;
  background-color: #f8f8f8;
  object-fit: cover;
}

/* 三图, 图片容器 */
.thumb-box {
  display: flex;
  justify-content: space-between;
}
</style>
